<template>
  <div class="div_dialog_image">
    <!-- <el-dialog width="20%" align="center" :visible.sync="$parent.ImageOpen" :before-close="handleClose"> -->
    <!-- <el-image ref="preview" :src="src" :preview-src-list="[src]" z-index="9999">
      <div slot="error" class="image-slot">
        <i class="el-icon-picture-outline" :style="{ 'font-size': '200px' }"></i>
      </div>
    </el-image> -->
    <!-- </el-dialog> -->
    <el-image-viewer :on-close="handleClose" @click.stop="handleClickItem" :url-list="[src]" :zIndex="9999999" />
  </div>
</template>
<!-- 注意！！！！ 外层控制预览图片功能显隐字段名一定要为 ImageOpen 字段名 否则无法关闭图片查看器 -->
<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  components: {
    ElImageViewer
  },
  props: {
    src: {
      type: String,
      required: true
    },
  },
  // created () {
  //   this.handlePreview()
  // },
  methods: {
    handleClose () {
      this.$parent.ImageOpen = false
    },
  }
}
</script>

<style lang="scss" scoped>
.div_dialog_image ::v-deep.el-dialog__header {
  display: none;
}

.div_dialog_image ::v-deep.el-dialog__body {
  padding: 0;
  height: 0px;
}

.div_dialog_image ::v-deep.el-dialog {
  margin-top: 20vh !important;
}
</style>